<template>
  <div class="spa-container">
    <h2 style="margin-left:170px;">休闲娱乐</h2>
    <img src="../../../../static/images/img_22.png" width="500px" height="200px">
    <div class="spa-header">
      <div class="spa-info" >
        <h2>{{ tableData.dingdanName }}</h2>
        <div class="rating">
          <span v-for="i in spa.rating" style="color: #42b983; margin-left: 10px">{{ '★' }}</span>
          <span style="color: #fadd69; margin-left: 10px">5.0</span>
          <span style="color: #facf6e; margin-left: 10px">{{ spa.ratingCount }}条评价</span>
          <img src="../../../../static/images/img_23.png" style="width: 30px; height: 30px; margin-left:200px">
        </div>
        <a href="tel:">
          <i class="phone-icon"></i>
        </a>
      </div>
    </div>
    <div>
      <div class="category" @click="tj">{{ spa.category }}</div>
      <div class="category">{{ tableData.totalPrice }}元</div>
    </div>
    <div class="spa-details">
      <div class="business-hours">营业中 周一至周日 全天</div>
      <div class="features">
        <span v-for="feature in spa.features">{{ feature }}</span>
      </div>
      <div class="address">
        <span>{{ spa.address }}</span>
        <span>{{ spa.locationDetail }}</span>>
      </div>
    </div>
    <hr class="mi">
    <div class="book-now">
      <button><th>优惠预定</th></button>
      <div class="refund-info">提前30分可退</div>
    </div>

    <div class="spa-services">
      <div class="service-ie" v-for="(service, index) in spa.services" :key="index">
        <div class="service-item">
          <div class="service-name"><span>{{ service.name }}</span></div>
          <div class="service-description"><span>{{ service.description }}</span></div>
          <div class="service-duration"><span>{{ service.duration }}</span></div>
          <div class="service-price">
            <span class="current-price">¥{{ service.currentPrice }}</span>
            <span class="original-price">¥{{ service.originalPrice }}</span>
          </div>
        </div>
        <div class="book-btn">
          <button @click="bookService">预订</button>
          <span class="sales">已售{{ service.sales }}</span>
        </div>
      </div>
    </div>

    <hr class="mi">
    <div class="header">
      <span>技师 (5)</span>
    </div>
    <div class="technician-list">
      <div class="technician-item">
        <img src="../../../../static/images/2.jpg" width="200px" height="100px">
        <div class="technician-info">
          <h3>莉莉</h3>
        </div>
      </div>
      <div class="technician-item">
        <img src="../../../../static/images/1.jpg" width="200px" height="100px">
        <div class="technician-info">
          <h3>菲菲</h3>
        </div>
      </div>
      <!-- 其他技师信息 -->
    </div>
    <div class="rating-section">
      <div class="rating-info">
        <span>评价 (3.2万)</span>
        <span>更多评价 ></span>
      </div>
      <div class="overall-rating" >
        <span style="color: #f44336; font-size: 20px;" >4.6</span>
        <span>整体评分</span>
        <span class="star-rating">★★★★★</span>
        <span class="rating-list">
          <span>{{span.name}}</span>
          <span style="color: #f44336;">{{span.age}}</span>
        </span>
        <span class="rating-list">
        <span>{{span.neame}}</span>
        <span style="color: #f44336;">{{span.aage}}</span>
        </span>
        <span class="rating-list">
        <span>{{span.neeame}}</span>
        <span style="color: #f44336;">{{span.aaage}}</span>
        </span>
      </div>
      <div class="rating-details">
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #a5d59e;">技师专业 1230</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #a5d59e;">热情服务 32</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color:#a5d59e;">放松舒服 897</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #a5d59e;">环境很好 120</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #d5d3d3;">性价比高 190</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #d5d3d3;">按摩 33</span>
        </div>
        <div class="rating-item">
          <span style=" padding: 5px 10px; border-radius: 5px; margin-right: 10px; background-color: #d5d3d3;">放松 560</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const  url = "http://localhost:1000/"
export default {
  data() {
    return {
      entertainmentId:1,
      tableData:{},
      span:{
        name:'专业',
        age:3.6,
        neame:'环境',
        aage:4.5,
        neeame:'服务',
        aaage:3.8
      },
      spa: {
        imageUrl: 'https://example.com/spa-image.jpg',
        // name: '千手足道·SPA',
        rating: 5.0,
        ratingCount: '3.4万',
        category: '按摩/足疗',
        features: ['免费停车', '洗浴房', '电影院', '共12个房间', '免费点心'],
        address: '朝阳路十里堡3号院A座',
        locationDetail: '距地铁1号线四惠站C2口（东北口）步行1.4km',
        services: [
          {
            name: '风景 按摩',
            description: '45分钟 | 全身 | 按摩/推拿',
            duration: '',
            currentPrice: 128,
            originalPrice: 160,
            sales: '1万+'
          },
          {
            name: '风景 泡泡浴',
            description: '80分钟 | 背部 | 其他',
            duration: '',
            currentPrice: 699,
            originalPrice: 755,
            sales: '1万+'
          }
        ]
      }
    };
  },
  methods: {
    // findPage(){
    //   this.axios.post(url + "entertainment/findPage").then(res => {
    //     this.tableData = res.data.data;
    //   })
    // },
    findById() {
      this.axios.get(url + "entertainment/findById?entertainmentId="+this.entertainmentId).then(res => {
        this.tableData = res.data.data;
        console.log("findById 响应数据:", this.tableData);
      }).catch(error => {
        console.error("查询失败:", error);
      });
    },
    tj(){
      this.$router.push({ path: '/club' });
    },
    bookService() {
      // 这里可以添加预订服务的逻辑，例如调用后端接口等
      this.$router.push({path:"/sub"})
    }
  },
  created() {
      this.findById();
    // this.findPage();
  }
};
</script>

<style scoped>
.spa-services{
  width: 500px;
  margin: 0 auto;
}
service-ie{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
.service-item{
  text-align: left;
}
.rating-list{
  margin-left:20px;
}
.spa-container {
  width: 300px;
  margin: 0 auto;
}

.spa-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 500px;
  height: 150px;
}

.spa-info h2 {
  margin-right: 500px;
  width: 200px;
  height: 10px;
}

.rating {
  display: flex;
  align-items: center;
}

.mi{
  width: 500px;
  border: 2px solid #d5d3d3;
}

.phone-icon {
  width: 30px;
  height: 30px;
  background: url('https://example.com/phone-icon.png') no-repeat center center;
  background-size: cover;
  display: inline-block;
  margin-left: 10px;
}

.spa-details {
  width: 500px;
  margin-bottom: 20px;
}

.category {
  width: 90px;
  font-weight: bold;
  margin-bottom: 5px;
}

.business-hours {
  width: 190px;
  color: #666;
  margin-bottom: 5px;
}

.features span {
  width: 130px;
  padding: 2px 5px;
  background-color: #f0f0f0;
  margin-right: 5px;
}

.address {
  color: #666;
}

service-name {
  font-weight: bold;
}

.service-description {
  font-size: 15px;
  color: #666;
}

service-duration {
  color: #999;
}
.service-price{
  font-weight: bold;
}
.current-price {
  color: #f44336;
  font-weight: bold;
  color: red;
}

.original-price {
  text-decoration: line-through;
  color: #999;
}

.book-btn {
  display: flex;
  justify-content: space-between;
}

.book-btn button {
  border-radius: 50px;
  width: 80px;
  height:25px;
  background-color: #4CAF50;
  color: white;
  border: none;
}

.book-btn.sales {
  color: #999;
}

.book-now {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.book-now button {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

.book-now.refund-info {
  color: #666;
}
.app {
  width: 300px;
  margin: 0 auto;
}

.header {
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}

.technician-list {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}

.technician-item {
  width: 150px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.technician-item img {
  width: 150px;
  height: 150px;
}

.technician-info {
  text-align: left;
}

.rating-section {
  margin-top: 20px;
}

.rating-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.overall-rating {
  width: 400px;
  height: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.star-rating {
  color: gold;
}

.rating-details {
  width: 400px;
  height: 130px;
  display: flex;
  flex-wrap: wrap;
}

.rating-item {
  width: 50%;
  margin-bottom: 5px;
}

.review-section {
  margin-top: 20px;
}

.review-item {
  display: flex;
  margin-bottom: 20px;
}

.user-info {
  width: 50px;
  margin-right: 10px;
}

.user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-details {
  text-align: left;
}

.review-content {
  flex: 1;
  text-align: left;
}

.image-section {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.image-section img {
  width: 90px;
  height: 90px;
}
</style>
